<template>
    <div ref="chart"></div>
</template>
  
<script>
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
import {
    BarChart
} from 'echarts/charts';

// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent
} from 'echarts/components';

// 标签自动布局、全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';

// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步，本身echarts图表渲染就是用canvas或者svg
import { CanvasRenderer } from 'echarts/renderers';


// 注册必须的组件
echarts.use([
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent,
    BarChart,
    LabelLayout,
    UniversalTransition,
    CanvasRenderer
]);


export default {
    name: 'myEcharts',
    props: {
        options: {
            type: Object,
            default: () => ({})
        }
    },
    methods:{
        initChart() {
            let mychart = echarts.init(this.$refs.chart)
            mychart.setOption(this.options)
        }
    },
    mounted() {
        this.initChart()
    }
}

</script>
  
<style scoped lang="scss"></style>
  